<!DOCTYPE html>
<html>
<head>
    <meta name="referrer" content="never"><!--绕过防盗链-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>首页</title>

    <script src="./js/jquery-1.12.3.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css" type="text/css">

    <style>
        div.item img{
            width:100%;
            height: 50%;
        }
        div#carousel-example-generic{
            width:100%;
            margin:0 auto;

        }
        .item{
            display: block;
            height: 400px;
            width: 100%;
            background-size: cover;
            background-position:  center;
            background-repeat: no-repeat;
        }
    </style>

</head>
<body>

<!--头部的导航栏-->
<div class="row">
    <div class="col-md-12">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">MH电影网</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                                <li><a href="http://theater.mtime.com/China_Henan_Province_Luoyang/" target="_blank">购票</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">会员<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">会员登录登录</a></li>
                                <li><a onclick="registerCustomer()" class="btn-primary">会员注册</a></li>
                            </ul>
                        </li>
                        <li><a href="http://www.mtime.com/community/" >社区</a></li>
                        <li><a href="/zmhssm/login" class="btn-primary">管理员登录</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
</div><!--end of 头部的导航栏-->




<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://img5.mtime.cn/mg/2019/04/26/101028.29174271.jpg" >
            <div class="container">
                <div class="carousel-caption">
                    <h2 style="color: #5e5e5e">皮卡丘大侦探<span id="myspan" >5月10号</span></h2>
                    <p>精灵活现萌翻天/一萌化心遮百瑕</p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="http://img5.mtime.cn/mg/2019/05/28/144423.22027534.jpg" >
            <div class="container">
                <div class="carousel-caption">
                    <h2 >X战警<span id="myspan" >黑凤凰</span></h2>
                    <p>漫威变种人宇宙撕裂  x战警二十年史诗绝唱</p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="http://img5.mtime.cn/mg/2019/05/22/112759.14530895.jpg" >
            <div class="container">
                <div class="carousel-caption">
                    <h2 >哥斯拉<span id="myspan" >怪兽之王</span></h2>
                    <p>5月31  王者争霸</p>
                </div>
            </div>
        </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    </a>
</div>

<!--star===============注册模态框-->
<div class="modal fade registermodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">注册新账号</h4>
            </div>
            <form id="register_form" method="post">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="regisUsername">账号</label>
                        <input type="text" name="regi_username" class="form-control" id="regisUsername">
                        <span class="help-block"></span>
                    </div>
                    <div class="form-group">
                        <label for="regisPassword">密码</label>
                        <input type="password" name="regis_password" class="form-control" id="regisPassword">
                        <span class="help-block"></span>
                    </div>
                    <div class="form-group">
                        <label for="conformPwd">再次输入密码</label>
                        <input type="password" name="conform_pwd" class="form-control" id="conformPwd">
                        <span class="help-block"></span>
                    </div>
                </div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="regis_pic"
                           name="pic" placeholder="验证码" required>
                    <span class="help-block"></span>
                    验证码：<img src="captcha" id="regis_code" width="120" height="40">
                </div>
                <span class="help-block"></span>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="btn_modal_register">注册</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--end================注册模态框-->
<script>


    //前端校验
    var flag1 ;
    var flag2 ;
    var flag3 ;

    $("#regisUsername").blur(function () {
        return checkUser();
    });


    $("#regisPassword").blur(function () {
        return checkPwd();
    });


    $("#conformPwd").blur(function () {
        return checkRepwd();
    });//end of 前端校验


    //验证用户名
    function checkUser(){

        var user=$("#regisUsername").val().trim();
        var reguser=/^[a-zA-Z0-9](\w|.|-){2,16}[a-zA-Z0-9]$/;
        if(reguser.test(user)==false){
            $("#regisUsername").parent().addClass("has-error").removeClass("has-success");
            $("#regisUsername").next("span").text("只能以数字、字母开头或结尾，组长度为4-18");
            flag1=1;
        }else{
            $.ajax(
                {
                    url:"checkUser",
                    type:"POST",
                    data:{"username":$("#regisUsername").val()},
                    success:function (a) {
                        if (a.state=="200"){
                            $("#regisUsername").parent().addClass("has-success").removeClass("has-error");
                            $("#regisUsername").next("span").text("用户名可用！");
                            flag1 = 0;
                        }if (a.state=="100"){
                            $("#regisUsername").parent().addClass("has-error").removeClass("has-success");
                            $("#regisUsername").next("span").text(a.obj);
                            flag1 =  1;
                        }
                    }
                }

            );
            return 1;
        }
    }
    //验证密码
    function checkPwd(){
        var pwd=$("#regisPassword").val().trim();
        var regpwd=/^[0-9a-zA-Z]{4,18}$/;
        if(regpwd.test(pwd)==false){
            $("#regisPassword").parent().addClass("has-error").removeClass("has-success");
            $("#regisPassword").next("span").text("密码由英文字母和数字组成的4-18位字符");
            return flag2 = 1;
        }else{
            $("#regisPassword").parent().addClass("has-success").removeClass("has-error");
            $("#regisPassword").next("span").text(" ");
            return flag2 = 0;
        }
    }
    //确认密码
    function checkRepwd(){
        var pwd=$("#regisPassword").val().trim();
        var repwd=$("#conformPwd").val().trim();
        if(pwd==""){
            $("#conformPwd").next("span").text("您的密码为空！");
            return flag3 = 1;
        }
        if(repwd!=pwd){
            $("#conformPwd").parent().addClass("has-error").removeClass("has-success");
            $("#conformPwd").next("span").text("两次输入密码不一致！");
            return flag3 = 1;
        }else{
            $("#conformPwd").parent().addClass("has-success").removeClass("has-error");
            $("#conformPwd").next("span").text("");
            return flag3 = 0;
        }
    }


    function clear(element) {
        // 每次显示前要清空
        $(element).parent().removeClass("has-success");
        $(element).parent().removeClass("has-error");
        $(element).next("span").empty();
        $(element).val("");/*清空数据*/

    }

    function registerCustomer(){
        $(".registermodal").modal("show");
        clear("#username");
        clear("#password");
        clear("#pic");
    }

    /*star======更换验证码*/
    $('#code').click(function()
    {
        $('#code').attr("src", "captcha?timestamp=" + (new Date()).valueOf());
    });
    $('#regis_code').click(function()
    {
        $('#regis_code').attr("src", "captcha?timestamp=" + (new Date()).valueOf());
    });/*end =========更换验证码*/


    /*star===========注册表单的提交按钮*/
    $("#btn_modal_register").click(function () {
        var json = {"regisUsername":$("#regisUsername").val(),
            "regisPassword":$("#regisPassword").val(),
            "conformPwd":$("#conformPwd").val(),
            "regis_pic":$("#regis_pic").val()};
        var flag = parseInt(flag1) +parseInt(flag2) +parseInt(flag3);




        if(flag==0){//当flag等于0的时候说明前几个校验都成功了！
            $.ajax({
                url:"registerc",
                type:"POST",
                data:JSON.stringify(json),
                dataType: 'json',
                contentType:'application/json;charset=UTF-8', //contentType很重要  苦笑   确实很重要
                success: function (a) {
                    if(a.state="100"){
                        $("#regis_pic").parent().addClass("has-error");
                        $("#regis_pic").next("span").text("验证码错误！");
                    }
                    if(a.state=="200"){//a.state 200表示注册成功  这是a.state 会携带新注册的用户名
                        $(".registermodal").modal("hide");
                        alert("注册成功！快去登录吧！");
                        $("#username").val(a.obj);
                    }

                }
            });
        }//end of if
    });/*end =========注册表单提交*/

</script>


<!--搜索模块-->
<div class="row">
    <div class="col-md-12">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">


                <ul class="nav navbar-nav">
                    <a class="navbar-brand" href="#">洛阳</a>

                    <li><a href="#" onclick="">切换城市</a></li>
                    <!--根据condition keyword 查询电影的表单-->
                    <li><select class="form-control" id="select-condition">
                        <option value="name">片名</option>
                        <option value="year">年份</option>
                        <option value="directors">导演</option>
                        <option value="actors">主演</option>
                        <option value="tags">类别</option>
                        <option value="languages">语言</option>
                        <option value="releaseDates">上映时间</option>
                        <option value="star">评分</option>
                    </select></li>
                    <li><input id="keyword" type="text" class="form-control" placeholder="关键字">
                    </li>
                    <li>
                        <button id="btn_search" type="button" class="btn btn-primary">搜索</button>
                    </li>

                </ul>

            </div><!-- /.container-fluid -->
        </nav>
    </div>
</div><!--end of 搜索模块-->


<script>

</script>


<!--点击电影图片显示模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="modal-index-filminfo">
    <div class="modal-dialog" role="document">
        <div class="modal-content col-xs-16"  >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h1 class="modal-title text-info" id="modal_title_filmname">电影名称</h1>
            </div>

            <div class="modal-body">
                <div class="container">

                    <div class="row">

                        <div class="col-xs-3 "><img id="a_imgurl" ></div>

                        <div class="col-xs-3 ">
                            <div class="row dataRow">
                                <div>导演：<a id="a_directors"></a></div>
                            </div>
                            <div class="row dataRow">
                                <div>编剧：<a id="a_writers"></a></div>
                            </div>
                            <div class="row dataRow">
                                <div>主演：<a id="a_actors"></a></div>
                            </div>
                            <div class="row dataRow">
                                <div>类型：<a id="a_tags"></a></div>
                            </div>
                            <div class="row dataRow">
                                <div>地区：<a id="a_areas"></a></div>
                            </div>
                            <div class="row dataRow">
                                <div>上映时间：<a id="a_release_date"></a></div>
                            </div>
                            <div class="row dataRow">
                                <div>评分:<a id="a_star"></a></div>
                            </div>
                            <div class="row dataRow">
                                <div>评价人数：<a id="a_evaluate_num"></a></div>
                            </div>
                            <div class="row dataRow">
                                <div>豆瓣地址：<a id="a_url"></a></div>
                            </div>
                            <div class="row dataRow">
                                <div>语言：<a id="a_languages"></a></div>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-xs-6 ">
                            <textarea  id="a_introduction" class="form-control" rows="20" style="resize:none" readonly >评论内容</textarea>
                            </textarea></div>

                    </div>
                </div>



            </div><!--/.modal-body-->
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!--图文分页-->
<div class="piclist">
    <ul class="listul"></ul>
    <div class="fydiv">
        <ul class="fenye"></ul>
    </div>
</div>

<script type="text/javascript">

    var filmsize;
    var film;
    var filmarr;

    /*========为搜索按钮的注册点击事件监听==========*/
    $(document).ready(function() {

        $("#btn_search").click(function () {

            $.ajax({
                url:"indexGetCondition",
                type:"POST",
                data:{"condition":$("#select-condition").val(),
                    "keyword":$("#keyword").val()},
                success:function (data) {
                    film = data.films;
                    filmsize=data.size;
                    /*创建二维数组*/
                    var filmarr2 = new Array();         //先声明一维
                    for(var i=0;i<filmsize;i++){          //一维长度为5
                        filmarr2[i]=new Array(i);    //在声明二维
                        filmarr2[i][0] = film[i].name;
                        filmarr2[i][1] = film[i].imdbUrl;
                        filmarr2[i][2] = film[i].imgurl;
                    }/*end of  二维数组*/
                    filmarr = filmarr2;
                    getPage(1);
                }


            })
        });
    });/*===========end of 搜索按钮======*/





    /*ajax获取获取所有电影的图片和电影的名字*/
    $.ajax(
        {
            url:"getfilmimg",
            type:"GET",
            success:function (data) {
                film = data.films;
                filmsize=data.size;
                /*创建二维数组*/
               var filmarr2 = new Array();         //先声明一维
                for(var i=0;i<filmsize;i++){          //一维长度为5
                    filmarr2[i]=new Array(i);    //在声明二维
                    filmarr2[i][0] = film[i].name;
                    filmarr2[i][1] = film[i].imdbUrl;
                    filmarr2[i][2] = film[i].imgurl;
                }/*end of  二维数组*/
                filmarr = filmarr2;
                getPage(1);
            }
        }
    );
    /*启动绘制页面和显示页码*/
   /* getPage(1);*/
    //翻页
    function getPage(pn){

        var dataCount=filmsize;//总数据条数
        var pageSize=6;//每页显示条数
        var pageCount= Math.ceil(dataCount / pageSize);//总页数
        if(pn==0||pn>pageCount){
            return;
        }
        var ul=$(".listul");
        ul.empty();
        //console.log(pageCount+"..."+pn)
        paintPage(pageCount,pn);   //绘制页码
        var startPage = pageSize * (pn - 1);
        if (pageCount == 1) {     // 当只有一页时
            for (var j = 0; j < dataCount; j++) {

                var e="<li><a  onclick=\"indexgetfilminfo(\'key\')\"><img src=\"imgurl\"></a><p><span>filmname"+j+"</span></p></li>";
                var e2=e.replace(/imgurl/,filmarr[j][2]);//改图片地址
                var e3 = e2.replace(/filmname/,filmarr[j][0]);//改电影名称
                var e4 = e3.replace(/key/,filmarr[j][1]);//改imdburl
                ul.append(e4);
            }
        }else {      // 当超过一页时
            var e="";
            var endPage = pn<pageCount?pageSize * pn:dataCount;
                for (var j = startPage; j < endPage; j++) {
                    var e="<li><a  onclick=\"indexgetfilminfo(\'key\')\"><img src=\"imgurl\"></a><p><span>filmname"+j+"</span></p></li>";
                    var e2=e.replace(/imgurl/,filmarr[j][2]);//改图片地址
                    var e3 = e2.replace(/filmname/,filmarr[j][0]);//改电影名称
                    var e4 = e3.replace(/key/,filmarr[j][1]);//改imdburl
                    ul.append(e4);
            }
        }
    }


    function indexgetfilminfo(key) {
        $.ajax({
            url:"indexgetfilminfo",
            type:"GET",
            data:{"key":key},
            success:function (str) {
                $("#a_imgurl").attr("src",str.obj.imgurl);
                $("#modal_title_filmname").html(str.obj.name);
                $("#a_areas").html(str.obj.areas);
                $("#a_directors").html(str.obj.directors);
                $("#a_evaluate_num").html(str.obj.evaluateNum);
                $("#a_languages").html(str.obj.languages);
                $("#a_release_date").html(str.obj.releaseDates);
                $("#a_star").html(str.obj.star);
                $("#a_tags").html(str.obj.tags);
                $("#a_url").html(str.obj.url);
                $("#a_writers").html(str.obj.writers);
                $("#a_introduction").val("简介"+str.obj.introduction);

                $("#modal-index-filminfo").modal("show");
            }
        })
    }

    //绘制页码
    function paintPage(number,currNum)  //number 总页数,currNum 当前页
    {
        var pageUl=$(".fenye");
        pageUl.empty();
        var ulDetail="";

        if(number==1){
            ulDetail= "<li class=\"prev\"><a href=\"javascript:void(0)\">上一页</a></li>"+
                "<li class=\"numb choose\"><a href=\"javascript:getPage(1)\">1</a></li>"+
                "<li class=\"next\"><a href=\"javascript:void(0)\">下一页</a></li>";
        }else if(number==2){
            ulDetail= "<li class=\"prev\"><a href=\"javascript:getPage(1)\">上一页</a></li>"+
                "<li class=\"numb"+choosele(currNum,1)+"\"><a href=\"javascript:getPage(1)\">1</a></li>"+
                "<li class=\"numb"+choosele(currNum,2)+"\"><a href=\"javascript:getPage(2)\">2</a></li>"+
                "<li class=\"next\"><a href=\"javascript:getPage(2)\">下一页</a></li>";
        }else if(number==3){
            ulDetail= "<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">上一页</a></li>"+
                "<li class=\"numb"+choosele(currNum,1)+"\"><a href=\"javascript:getPage(1)\">1</a></li>"+
                "<li class=\"numb"+choosele(currNum,2)+"\"><a href=\"javascript:getPage(2)\">2</a></li>"+
                "<li class=\"numb"+choosele(currNum,3)+"\"><a href=\"javascript:getPage(3)\">3</a></li>"+
                "<li class=\"next\"><a href=\"javascript:getPage("+parseInt(currNum+1)+")\">下一页</a></li>";
        }else if(number==currNum&&currNum>3){
            ulDetail= "<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">上一页</a></li>"+
                "<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum-2)+")\">"+parseInt(currNum-2)+"</a></li>"+
                "<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">"+parseInt(currNum-1)+"</a></li>"+
                "<li class=\"numb choose\"><a href=\"javascript:getPage("+currNum+")\">"+currNum+"</a></li>"+
                "<li class=\"next\"><a href=\"javascript:getPage("+currNum+")\">下一页</a></li>";
        }else if(currNum==1&&number>3){
            ulDetail= "<li class=\"prev\"><a href=\"javascript:void(0)\">上一页</a></li>"+
                "<li class=\"numb choose\"><a href=\"javascript:void(0)\">1</a></li>"+
                "<li class=\"numb\"><a href=\"javascript:getPage(2)\">2</a></li>"+
                "<li class=\"numb\"><a href=\"javascript:getPage(3)\">3</a></li>"+
                "<li class=\"next\"><a href=\"javascript:getPage(2)\">下一页</a></li>";
        }else{
            ulDetail= "<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">上一页</a></li>"+
                "<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">"+parseInt(currNum-1)+"</a></li>"+
                "<li class=\"numb choose\"><a href=\"javascript:getPage("+currNum+")\">"+currNum+"</a></li>"+
                "<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum+1)+")\">"+parseInt(currNum+1)+"</a></li>"+
                "<li class=\"next\"><a href=\"javascript:getPage("+parseInt(currNum+1)+")\">下一页</a></li>";
        }

        $(".fenye").append(ulDetail);

    }

    function choosele(num,cur){
        if(num==cur){
            return " choose";
        }else{
            return "";
        }
    }
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    <p>明天醒来，又是一条好汉</p>
    <p>来源：<a href="http://sc.chinaz.com/" target="_blank">豆瓣电影</a></p>
</div>
</body>
</html>
